<template>
  <Modal v-bind="$attrs" @cancel="cancel">
    <a-form ref="formRef" :label-col="{ style: { width: '170px' } }" :wrapper-col="{ span: 24 }">
      <Item v-for="(list, index) in state.fields" :key="list" :idx="index" @handlerDel="handlerDel" />

      <div class="cp color-primary" v-if="state.fields.length < 10">
        <span @click="push">
          <PlusOutlined />
          新增筛选条件
        </span>
      </div>
    </a-form>
  </Modal>
</template>
<script lang="ts" setup>
  import { ref, Ref, reactive } from "vue"
  import type { FormInstance } from "ant-design-vue"
  import { PlusOutlined } from "@ant-design/icons-vue"
  import Modal from "@/components/modal/index.vue"
  import Item from "./item.vue"
  import Password from "@/components/password/index.vue"
  import { PAW_PLACEHOLDER } from "@/constant/index"
  //ref
  const formRef = ref<FormInstance>()

  const handlerDel = (idx: number) => {
    state.fields.splice(idx, 1)
  }

  const state = reactive({
    fields: [{}],
    value1: "",
    value2: "",
  })

  const cancel = () => {
    state.fields = [{}]
  }

  const push = () => {
    state.fields.push({})
  }
</script>
